<template>
    <div id="columnEchart" style="height: 45vh;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
    name: "columnEchart",
    data() {
        return {
            chart: null,
            options: {},
            max: "", //最大value值
            min: "", // 最小value值
            type: 0
        };
    },
    created() {
        // this.getData();
    },
    mounted() {
        this.initOptions();
        this.initCharts();
    },
    methods: {
        initOptions() {
            this.options = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                title: {
                    text: "近五年指标概况"
                },
                legend: {
                    data: ['食品安全', '信用监管', '行政执法', '一品一码']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: ['2018', '2019', '2020', '2021', '2022']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '食品安全',
                        type: 'bar',
                        barGap: 0,
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320, 332, 301, 334, 390]
                    },
                    {
                        name: '信用监管',
                        type: 'bar',
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 12, 191, 234, 290]
                    },
                    {
                        name: '行政执法',
                        type: 'bar',
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 232, 201, 54, 190]
                    },
                    {
                        name: '一品一码',
                        type: 'bar',
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [98, 77, 101, 99, 240]
                    }
                ]
            };
        },
        initCharts() {
            // echarts.registerMap("平潭", pingtan);
            this.chart = echarts.init(document.getElementById("columnEchart"));

            this.chart.setOption(this.options, true);
        }
    }
};

</script>
